<template>
  <div class="register">
    <div class="register_ct">
      <h4>新用户注册</h4>
      <p>很高兴您将成为商城的会员（注册只需一步）</p>
      <my-input placeholder="手机号" v-model="form.mobile">
        <i class="iconfont icon-shouji"></i>
      </my-input>
      <my-input placeholder="密码" inputType="password" v-model="form.pwd">
        <i class="iconfont icon-biyan"></i>
      </my-input>
      <my-input placeholder="确认密码" inputType="password">
        <i class="iconfont icon-biyan"></i>
      </my-input>
      <my-input placeholder="用户名" v-model="form.nick">
        <i class="iconfont icon-gerentouxiang"></i>
      </my-input>
      <my-input placeholder="图形验证码" v-model="imgCode">
        <img :src="`https://api.it120.cc/small4/verification/pic/get?key=${getTime}`" alt="" @click="getImgCode" />
      </my-input>
      <my-input placeholder="选择所在城市" v-model="city" @click="show=true"></my-input>
      <my-input placeholder="短信验证码" v-model="form.code">
          <button @click="getCode" :disabled="disabled">{{message}}</button>
      </my-input>
      <button class="regBtn" @click="registerFtn">立即注册</button>
      <router-link to="/login">已有账号？ 立即登录</router-link>
    </div>
  </div>
  <van-action-sheet v-model:show="show">
    <van-area @cancel="show=false" @confirm="confirm" :area-list="areaList" :columns-num="2" />
  </van-action-sheet>
</template>

<script>
import { Notify } from "vant";
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import myInput from "../../components/myInput.vue";
import { areaList } from '@vant/area-data';
import { getSms,register } from '../../api/second/index';
export default {
  components: { myInput },
  setup() {
    const router = useRouter();
    const data = reactive({
      getTime: new Date().getTime(),
      show: false, // 控制城市选择弹出框的显示隐藏
      city: '', // 城市的值
      imgCode: '', // 图形验证码
      form: {
        mobile: '', // 手机号
        pwd:'', // 密码
        code: '', // 短信验证码
        nick: '', // 昵称
        province: '', // 所属省份
        city: ''// 所属城市,
      },
      message: '获取验证码',
      disabled: false, // 是否可以点击获取验证码, false 是可以 true 是不允许
    });

    const getImgCode = () => {
      data.getTime = new Date().getTime();
      // new Date().getTime 获取当前的时间戳
    };
    const confirm = (val) => { // 城市选择的确认事件
        // console.log(val);
        data.city = `${val[0].name}-${val[1].name}`;
        data.form.province = val[0].code;
        data.form.city = val[1].code;
        data.show = false;
    }

    const getCode = () => { // 获取短信验证码的接口
       getSms({mobile:data.form.mobile,key:data.getTime,picCode:data.imgCode}).then(res => {
           if (res.code == 0){
               Notify({ type: 'success', message: '短信发送成功！' });

            // 倒计时的逻辑   
               data.disabled = true;
               let num = 60;
               let time = setInterval(()=>{
                   if (num<=0){
                     data.disabled = false;
                     clearInterval(time);
                     data.message = '获取验证码';
                   } else {
                       num--;
                       data.message = `${num}秒后在试`;
                   }
               },1000)
           }
       })
    }
    
    const registerFtn = () => { // 注册的函数
      register(data.form).then(res => {
         if (res.code == 0){
            router.replace('/login');
            // replace 都是页面的跳转，他不会存入历史记录
            // push 是能存入历史记录的
         }
      })
    }
    return {
      ...toRefs(data),
      getImgCode,
      areaList,
      confirm,
      getCode,
      registerFtn
    };
  },
};
</script>
<style lang="scss" scoped>
.register {
  padding: 20px;
  img {
    width: 100%;
  }
  .register_ct {
    padding: 0 30px;
    border: 1px solid #f5f5f5;
    text-align: center;
    h4 {
      margin-top: 30px;
      color: #666;
    }
    p {
      margin-top: 20px;
      color: #909090;
      font-size: 16px;
    }
    .regBtn {
      color: #fff;
      font-size: 15px;
      width: 210px;
      height: 50px;
      border: none;
      border-radius: 5px;
      margin-top: 20px;
      background: linear-gradient(135deg, #e570e7 0%, #79f1fc 100%);
    }
    b {
      font-size: 12px;
      color: red;
    }
    a {
      display: block;
      font-size: 16px;
      color: #549ff9;
      margin: 20px 0 150px;
    }
  }
}
button{
  border: none;
  font-size: 12px;
  padding: 0;
  color: #999;
}
.icon {
  font-size: 12px;
  .iconfont {
    font-size: 18px;
    margin-left: 5px;
  }
}
</style>